<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="icon" href="../img/xiaomaomao.jpg">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>

    
    <!-- 头部 -->
    <div id="hard">
        <div class="typeArea heart clearfix">
            <div class="mark">realme.com</div>
            <div class="greet">欢迎光临，&emsp;请 <a href="#">登陆\<span>注册</span></a></div>
        </div>
    </div>
    <!-- 主体部分1 -->
    <div id="body1">
        <div class="heart clearfix">
            <div class="flag">realme</div>
            <div class="search">
                <div class="searchForm">
                    <input type="text" value="天玑 1000Plus | 65W闪充">
                    <a href="#">购物车</a> <a href="#" class="management">我的订单</a>
                    <span></span>
                    
                </div>
                <div class="variety">
                    <a href="#">真我GT 5G
                        <div>
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                        </div>
                    </a>
                    <a href="#">真我V15 5G
                        <div>
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                        </div>
                    </a>
                    <a href="#">真我Q2 5G
                        <div>
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                        </div>
                    </a>
                    <a href="#">真我Q2 Pro 5G
                        <div>
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                        </div>
                    </a>
                    <a href="#">真我Q2 5G
                        <div>
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                        </div>
                    </a>
                    <a href="#">真我V15 5G
                        <div>
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                        </div>
                    </a>
                    <a href="#">真我Q2 Pro 5G
                        <div>
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                        </div>
                    </a>
                    <a href="#">真我X7 5G
                        <div>
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                        </div>
                    </a>
                    <a href="#">真我X50 5G</a><a href="#">真我V11 5G</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 主体部分2 -->
    <div id="body2">
        <div class="idolader heart">
            <div class="worship">
                <p class="p1 chose"></p>
                <p class="p2"></p>
                <p class="p3"></p>
                <p class="p4"></p>
                <p class="p5"></p>
            </div>
            <ul>
                <li class="lis"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>

        </div>
    </div>
    <!-- 主体部分3 -->
    <div id="body3">
        <div class="heart clearfix">
            <div class="subnet">
                <ul>
                    <li>
                        <span><a>realme</a></span>
                        <div class="imgss1"></div>
                    </li>
                    <li>
                        <span><a>realme</a></span>
                        <div class="imgss2"></div>
                    </li>
                    <li>
                        <span><a>realme</a></span>
                        <div class="imgss3"></div>
                    </li>
                    <li>
                        <span><a>realme</a></span>
                        <div class="imgss4"></div>
                    </li>
                    <li>
                        <span><a>realme</a></span>
                        <div class="imgss5"></div>
                    </li>
                    <li>
                        <span><a>realme</a></span>
                        <div class="imgss6"></div>
                    </li>
                </ul>
                <!-- 选项卡 -->
                <div class="sunnit">
                    <ul class="clearfix">
                        <li>宝贝一</li>
                        <li>宝贝二</li>
                        <li>宝贝三</li>
                    </ul>
                    <div>
                        今日惊喜 <br>
                        <a class="a1">08</a> : <a class="a2">60</a> : <a class="a3">1000</a>
                        
                        <p class="p1"></p>
                        <p class="p2"></p>
                        <p class="p3"></p>
                    </div>
                </div>
            </div>
            <div class="slideshow">
                <ul class="clearfix">
                    <li class=""></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="feature">
                    <p class="p1 showp"></p>
                    <p class="p2"></p>
                    <p class="p3"></p>
                </div>
            </div>
        </div>
    </div>
    <!-- 主体部分4 -->
    <div id="body4">
        <div class="heart clearfix">
            <div class="shelfie">
                <div class="tabControl clearfix">
                    <div class="leftMost">产品</div>
                    <div class="rightMost">
                        <span class="show">最新上架</span>
                        <span>独家畅销</span>
                        <span>电子书</span>
                    </div>
                </div>
                <div class="books">
                    <p class="p1 showp">
                        <span class="one">
                             <span class="abbr">
                                 <i class="peach i1"></i><i class="i2"></i><i class="i3"></i><i class="i4"></i><i class="i5"></i>
                                 <i class="i6"></i><i class="i7"></i><i class="i8"></i><i class="i9"></i><i class="i10"></i><i class="i11"></i><i class="i12"></i>
                             </span>
                             <span class="transurethral">
                                 <a href="" class="aa">产品一</a> <a href="">产品二</a> <a href="">产品三</a> <a href="">产品四</a>
                                 <a href="">产品五</a> <a href="">产品六</a> <a href="">产品七</a> <a href="">产品八</a>
                                 <a href="">产品九</a> <a href="">产品十</a> <a href="">产品十一</a> <a href="">产品十二</a>
                             </span>
                        </span>
                        <span class="two">
                            <span class="crowded">
                                <b>
                                    <a href="" class="peachers aAs btf1"></a>
                                    <a href="" class="peachers btf2"></a>
                                    <a href="" class="peachers btf3"></a>
                                </b>
                                <i>
                                    <span class="red"></span>
                                    <span></span>
                                    <span></span>
                                </i>
                            </span>
                            <span class="moral"></span>
                        </span>
                        <span class="three"></span>
                    </p>
                    <p class="p2">
                        
                    </p>
                    <p class="p3">
                        
                    </p>
                </div>
            </div>
            <div class="bookrack">
                
                    <dl>
                        <dt class="reveal">新品一
                            <span>+</span>
                        </dt>
                        <dd class="close dd1">苹果1</dd>
                        <dt>新品二
                            <span>+</span>
                        </dt>
                        <dd class="dd2">香蕉1</dd>
                        <dt>新品三
                            <span>+</span>
                        </dt>
                        <dd class="dd3"> 栗子1</dd>
                        <dt>新品四
                            <span>+</span>
                        </dt>
                        <dd class="dd4">折耳根1</dd>
                    </dl>
                
            </div>
        </div>
    </div>
    <!-- 主体部分5 -->
    <div id="body5">
        <div class="heart navigation clearfix">
            <div class="star">明星</div>
            <div class="celebrity">
                <span class="orange">实力组</span>
                <span>偶像组</span>
                <span>淘汰组</span>
            </div>
        </div>
        <ul  class="depot heart">
            <li class="atlas wrips one clearfix">
                <div class="engage">
                    <ul class="gather1">
                        <li class="atlts atlts1 screen"></li>
                        <li class="atlts atlts2"></li>
                        <li class="atlts atlts3"></li>
                        <li class="atlts atlts4"></li>
                        <li class="atlts atlts5"></li>
                        <li class="atlts atlts6"></li>
                        <li class="atlts atlts7"></li>
                        <li class="atlts atlts8"></li>
                        <li class="atlts atlts9"></li>
                        <li class="atlts atlts10"></li>
                        <li class="atlts atlts11"></li>
                        <li class="atlts atlts12"></li>
                    </ul>
                    <ul class="gather2 clearfix">
                        <li class="photos reveals">美女一</li>
                        <li class="photos">美女二</li>
                        <li class="photos">美女三</li>
                        <li class="photos">美女四</li>
                        <li class="photos">美女五</li>
                        <li class="photos">美女六</li>
                        <li class="photos">美女七</li>
                        <li class="photos">美女八</li>
                        <li class="photos">美女九</li>
                        <li class="photos">美女十</li>
                        <li class="photos">美女十一</li>
                        <li class="photos">美女十二</li>
                    </ul>
                </div>
                <div class="appoin">
                    <div class="father">
                        <ul class="talte">
                            <li class="phone phone1 phones"></li>
                            <li class="phone phone2"></li>
                            <li class="phone phone3"></li>
                            <li class="phone phone4"></li>
                        </ul>
                        <ul class="brandish clearfix">2021 好货来袭
                            <li class="tomato tomatos"></li>
                            <li class="tomato"></li>
                            <li class="tomato"></li>
                            <li class="tomato"></li>
                        </ul>
                    </div>
                    <div class="month"></div>
                </div>
                <div class="ddinde"></div>
            </li>
            <li class="atlas two"></li>
            <li class="atlas three"></li>
        </ul>
        <ul class="logoGroup heart">
            <li class="logo logo1"></li>
            <li class="logo logo2"></li>
            <li class="logo logo3"></li>
            <li class="logo logo4"></li>
            <li class="logo logo5"></li>
            <li class="logo logo6"></li>
            <li class="logo logo7"></li>
            <li class="logo logo8"></li>
            <li class="logo logo9"></li>
        </ul>
    </div>
    <!-- yejiao页脚1 -->
    <div id="foot1">
        <div class="heart icon">
            <div class="warp clearfix">
                <div class="beauti beauti1"></div>
                <div class="beauti beauti2 beauti5"></div>
                <div class="beauti beauti3 beauti5"></div>
                <div class="beauti beauti4"></div>
            </div>
        </div>
        <div class="heart litt">
            <div class="warp">
                <ul class="clearfix">
                    <li class="diagonal">支付方式</li>
                    <li class="diagonal">网上支付</li>
                    <li class="diagonal">礼品卡支付</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                </ul>
            </div>
            <div class="number">
                <i>r e a l m e</i>
            </div>
        </div>
    </div>
    <!-- 导航栏 -->
    <div class="heart">
        <div id="floorPlan">
            <div class="analog toBottom">直达底部</div>
            <div class="analog firstFloor">一楼</div>
            <div class="analog twice">二楼</div>
            <div class="analog secondFloor">三楼</div>
            <div class="analog toTop">直达顶部</div>
            <div class="product">
                <ul>
                    <li class="index">首页</li>
                    <li class="">
                        <a href="../html/details.html" style="color: black;">产品列表页</a>
                    </li>
                    <li class="">购物车</li>
                    <li class="">登录</li>
                    <li class="">
                        <a href="../html/product copy.html" style="color: black;">产品详情</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--  蒙层 -->
    <div id="layer">
        <div class="gaine">
            <div class="money"></div>
            <div class="character">请扫码登录</div>
        </div>
    </div>
<script src="../js/index.js"></script>
</body>
</html>